<template>
	<div class="wrapper">
		<div class="header">
			<img src="../../assets/homeImg/top.png" alt="" />
		</div>
		<div class="headerNumber">

			<div class="statistical-items1" v-for="(item, index) in list" :key="item.id">
        <dv-border-box-12 :reverse="true" dur="10">
        <img class="images1" v-if="index == 0" src="../../assets/homeImg/home1.png" alt="" />
				<img class="images1" v-if="index == 1" src="../../assets/homeImg/home2.png" alt="" />
				<img class="images1" v-if="index == 2" src="../../assets/homeImg/home3.png" alt="" />
				<img class="images1" v-if="index == 3" src="../../assets/homeImg/home4.png" alt="" />
				<img class="images1" v-if="index == 4" src="../../assets/homeImg/home5.png" alt="" />
				<img class="images1" v-if="index == 5" src="../../assets/homeImg/home6.png" alt="" />
        <img class="images1" v-if="index == 6" src="../../assets/homeImg/home6.png" alt="" />
				<div class="name">{{ item.name }}</div>
				<div class="num">{{ item.num }}</div>
      </dv-border-box-12>
			</div>
		</div>
		<div class="bottom">
			<div class="bottomLeft">
				<div class="module-content">
          <dv-border-box-8 :reverse="true" dur="10">
          <div class="table-thead">
						<ul>
							<li v-for="column in theadText" :key="column.name" :style="{ width: column.width }" class="table-thead-column-item">{{ column.name }}</li>
						</ul>
					</div>
					<div class="table-body">
						<el-carousel style="flex: 1" :interval="10000" direction="vertical" v-if="!noData">
							<el-carousel-item v-for="(singlePage, idx) in tableData" :key="idx">
								<ul class="wrappers">
									<li class="row" :style="{ color: item.type === '1' ? '#fff' : '#DF7676' }" v-for="(item, index) in singlePage" :key="index">
										<ul v-show="typeof item === 'object'">
											<li :style="[{ width: theadText[0].width }]">{{ item.index }}</li>
											<li :style="[{ width: theadText[1].width }]">{{ item.repairNumber }}</li>
											<li :style="[{ width: theadText[2].width }]">{{ item.productModel }}</li>
											<li :style="[{ width: theadText[3].width }]" :class="{ undertint: !item.productNumber }">{{ item.productNumber || "/" }}</li>
											<li :style="{ width: theadText[4].width }" v-if="item.processSchedule && item.processSchedule.length <= 10">{{ item.processSchedule }}</li>
											<li :style="{ width: theadText[4].width }" v-if="item.processSchedule && item.processSchedule.length > 10">
												<div class="scroll-container">
													<div class="scroll-text">{{ item.processSchedule }}</div>
												</div>
											</li>
											<li :style="{ width: theadText[4].width }" v-if="!item.processSchedule">{{ item.processSchedule }}</li>
											<li :style="[{ width: theadText[5].width }]" :class="{ undertint: !item.workshopSection }">{{ item.workshopSection || "/" }}</li>
											<li :style="[{ width: theadText[6].width }, { color: item.type === '1' ? '#00FF99' : '#DF7676' }]">{{ item.status }}</li>
										</ul>
										<ul v-show="typeof item == 'string'">
											<li style="width: auto; color: #479ee0; margin-left: 25px; font-size: 1.5rem;font-weight: 500;">{{ item }}</li>
										</ul>
									</li>
								</ul>
							</el-carousel-item>
						</el-carousel>
						<div class="no-data" v-if="noData">
							<img src="../../assets/images/meiyoushuju.png" alt="" />
							<div>暂无数据</div>
						</div>
					</div></dv-border-box-8>

				</div>
			</div>
			<div class="bottomRight">
				<div class="rightTitLe">军检统计</div>
				<div class="select-time">
					<el-date-picker v-model="timeRange" value-format="yyyy-MM-dd" format="yyyy年M月d日" type="daterange" range-separator=" 至 " start-placeholder="开始日期" end-placeholder="结束日期" size="mini" :clearable="false" style="width: 16.5rem; margin-right: 1.75rem"></el-date-picker>
				</div>
				<div class="module-content">
					<div class="statistical-items statistical-itemstop">
						<img class="imagesitems" src="../../assets/homeImg/home7.png" alt="" />
						<div class="name">军检合格</div>
						<div class="num">{{ data1 }}</div>
					</div>
					<div class="statistical-items statistical-itemsbottom">
						<img class="imagesitems" src="../../assets/homeImg/home8.png" alt="" />
						<div class="name">军检不合格</div>
						<div class="num">{{ data2 }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getFirstDayOfYear, getLastDayOfYear } from "@/utils/index"
import { qualified, unqualified, repairOrderProductList } from "@/api/home.js"
import {partNum, onlineProducts, fileNotIssued, unpacked, unshipped, undelivered, militaryInspection } from "@/api/home.js"
import { reorganizeData } from "./fn.js"
export default {
	mounted() {},
	data() {
		return {
			saveTempData: [],
			noData: false,
			theadText: [
				{
					name: "序号",
					width: "6%"
				},
				{
					name: "返修单号",
					width: "16%"
				},
				{
					name: "返修产品",
					width: "18%"
				},
				{
					name: "产品编号",
					width: "16%"
				},
				{
					name: "工艺进度",
					width: "24%"
				},
				{
					name: "工段",
					width: "10%"
				},
				{
					name: "状态",
					width: "10%"
				}
			],
			tableData: [],
			list1: [],
			list2: [],
			data1: 0,
			data2: 0,
			timeRange: "",
			title: "",
			tableList: [],
			open: false,
			list: [
				{ id: 100, name: "在线产品", num: 0, dataList: [] },
				{ id: 101, name: "未下发", num: 0, dataList: [] },
				{ id: 102, name: "未下料", num: 0, dataList: [] },
				{ id: 103, name: "缺件零件", num: 0, dataList: [] },
				{ id: 104, name: "未交付", num: 0, dataList: [] },
				{ id: 105, name: "待提交", num: 0, dataList: [] },
        { id: 106, name: "未发货", num: 0, dataList: [] }
			]
		}
	},
	watch: {
		timeRange: {
			handler(newVal, oldVal) {
				this.getData1()
			},
			deep: true
		}
	},
	created() {
		this.getData()
		this.getData1()
		this.getList()
		this.timeRange = [getFirstDayOfYear(), getLastDayOfYear()]
	},
	methods: {
		async getData() {
			try {
				this.loading = true
				let res1 = await onlineProducts()
				this.list[0].num = res1.data.length
				let res2 = await fileNotIssued()
				this.list[1].num = res2.data.length
				let res3 = await unpacked()
				this.list[2].num = res3.data.length
        // 未交付
				let res4 = await undelivered()
				this.list[4].num = res4.data.length
        // 未发货
				let res5 = await unshipped()
				this.list[6].num = res5.data.length
        // 待提交
				let res6 = await militaryInspection()
				this.list[5].num = res6.data.length
        // 缺件零件
        let res7 = await partNum()
				this.list[3].num = res7.data
				this.loading = false
			} catch (error) {
				this.loading = false
				this.$modal.msgError("获取产品数据统计错误", error)
			}
		},
		async getData1() {
			if (this.timeRange[0] && this.timeRange[1]) {
				try {
					console.log(this.timeRange[0])
					let res_qualified = await qualified({
						beginTime: this.timeRange[0],
						finishTime: this.timeRange[1]
					})
					this.data1 = res_qualified.data.length
					this.list1 = res_qualified.data
					let res_unqualified = await unqualified({
						beginTime: this.timeRange[0],
						finishTime: this.timeRange[1]
					})
					this.data2 = res_unqualified.data.length
					this.list2 = res_unqualified.data
					this.loading = false
				} catch (error) {
					this.loading = false
					console.error(error)
					this.$modal.msgError("获取军检数据统计错误", error)
				}
			}
		},
    changeData(data){
      let tempArr = []
					for (let key in data) {
						tempArr.push(`${key}（${data[key].length}套）`)
						if (Array.isArray(data[key])) {
							for (let i = 0; i < data[key].length; i++) {
								data[key][i]["index"] = i + 1
								tempArr.push(data[key][i])
							}
						}
					}
					const group = this.chunkArray(tempArr, 10)
					const firstRunResult = reorganizeData(group)
					if (firstRunResult[1]) {
						const partialData = this.repetitiveExecution(firstRunResult[0]) //重复执行 把二维数组里的最后两个子数组拿出去给最后一个子数组查找用
						const rawDataSlice = firstRunResult[0].slice(0, -2) //这个-2代表的意思是我调repetitiveExecution这个函数时，第一次就是取了后面的两个子数组(怎么取得的呢？arr.slice(-2) 就是这个-2)
						this.tableData = rawDataSlice.concat(partialData)
					} else {
						this.tableData = firstRunResult[0]
						console.log("tableData", this.tableData)
					}
					this.noData = false
    },
		async getList() {
			try {
				this.loading = true
        const localData = JSON.parse(localStorage.getItem("tableDatas"))
        if (localData) {
          this.changeData(localData)
					this.noData = this.tableData.length === 0
          this.loading = false
				}
				const res = await repairOrderProductList()
				if (res.data) {
          localStorage.setItem("tableDatas", JSON.stringify(res.data))
             this.changeData(res.data)
				} else {
					this.tableData = []
					this.noData = true
				}
				this.loading = false
			} catch (error) {
				this.loading = false
				console.error(error)
			}
		},
		repetitiveExecution(arr) {
			const sliceData = reorganizeData(arr.slice(-2))
			// 如果返回的结果小于2的长度
			if (sliceData[0].length <= 2) {
				//如果还有多余的数据
				if (sliceData[1]) {
					this.repetitiveExecution(sliceData[0])
				} else {
					return this.saveTempData.concat(sliceData[0])
				}
			} else {
				this.saveTempData.concat(sliceData.slice(0, -2))
				this.repetitiveExecution(sliceData[0])
			}
		},
		chunkArray(array, chunkSize) {
			const result = []
			for (let i = 0; i < array.length; i += chunkSize) {
				const chunk = array.slice(i, i + chunkSize)
				result.push(chunk)
			}
			return result
		}
	}
}
</script>
<style>
.el-date-table td.start-date span, .el-date-table td.end-date span{
  background-color: #164892 !important;
}
</style>
<style lang="scss" scoped>
.el-date-table td.start-date span, .el-date-table td.end-date span{
  background-color: #164892 !important;
}
::v-deep .el-date-table td.start-date span, .el-date-table td.end-date span{
  background-color: #164892 !important;
}
::v-deep .el-date-editor {
	background: #164892 !important;
	color: #fff !important;
}
::v-deep .el-input__inner {
	background-color: transparent !important;
	border-color: #164892;
	background: #164892 !important;
	border-radius: 3px;
}
// ::v-deep .el-input__icon {
// 	color: #fff !important;
// }
::v-deep .el-range-input {
	background: #164892 !important;
	color: #fff !important;
}
::v-deep .el-date-editor .el-range-separator {
	color: #fff !important;
}
.wrapper {
	background: url("../../assets/homeImg/bg.png") no-repeat center;
	background-size: 100% 100%;
	overflow: hidden;
	height: 100vh;
	width: 100%;
	.header {
		width: 85.8125rem;
		height: 7.5625rem;
		margin: auto;
		img {
			width: 100%;
			height: 4.125rem;
			margin-top: 2.25rem;
		}
	}

	.headerNumber {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-wrap: wrap;
		overflow: hidden;
		.statistical-items1 {
			flex: 0 1 14%;
			height: 9.1375rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			position: relative;
			flex-shrink: 0;
			background: url("../../assets/homeImg/headerNumber.png") no-repeat center;
			background-size: 100% 100%;
		}

		.statistical-items1 .name {
			position: absolute;
			top: 50%;
			left: 56%;
			transform: translate(-50%, -50%);
			font-size: 1.35rem;
			color: #fff;
		}

		.statistical-items1 .num {
			position: absolute;
			top: 50%;
			left: 78%;
			transform: translateY(-50%);
			font-family: Microsoft YaHei;
			font-size: 1.6rem;
			color: #00fcff;
			font-family: KaiTi;
			font-weight: 400;
		}
		.statistical-items1 .images1 {
			position: absolute;
			top:55%;
			left: 4%;
			width: 5.75rem;
			height: 4.375rem;
			transform: translateY(-50%);
		}
	}
	.bottom {
		margin: 1.375rem 0;
		display: flex;
		width: 100%;
		height: calc(100% - 19rem);

		.bottomLeft {
			margin: 0 1rem;
			background: url("../../assets/homeImg/copy21.png") no-repeat center;
			background-size: 100% 100%;
			.module-content {
				width: 78.12rem;
				box-sizing: border-box;
				height: 100%;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				/* Webkit */
				::-webkit-scrollbar {
					display: none;
				}
				-webkit-overflow-scrolling: touch;
				/* Firefox */
				scrollbar-width: none;
				/* IE and Edge */
				-ms-overflow-style: none;
				.table-thead {
					width: 100%;
					height: 4.375rem;
					overflow: hidden;
					box-sizing: border-box;
					color: #ffffff;
					background: #0068b7;
					background-color: rgba(0, 0, 0, 0.15);
					ul {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
            background: url("../../assets/homeImg/copy1.png") no-repeat center;
					}
					ul > li {
						text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 1.375rem;
						color: #ffffff;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 4.375rem;

						letter-spacing: 1px;
					}
				}
				.table-body {
					width: 100%;
					// height: 44.25rem;
					height: calc(100% - 4rem);
					overflow: hidden;
					display: flex;
					flex-direction: column;
					.el-carousel {
						height: 100%;
						::v-deep .el-carousel__container {
							height: 100%;
							.wrappers {
								width: 100%;
								height: 100%;
								.row {
									width: 100%;
									height: 10%;
								}
							}
						}
					}
					.no-data {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-content: center;
						font-size: 16px;
						letter-spacing: 2px;
						color: #f8f8f8;
						text-align: center;
						user-select: none;
						img {
							width: 200px;
							height: 200px;
							opacity: 0.7;
							margin: 0 auto;
						}
					}
				}
			}

			.row {
				ul {
					width: 100%;
					display: flex;
					height: 100%;
					align-items: center;
				}
				ul > li {
					font-size: 1.375rem;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					flex-shrink: 0;
					letter-spacing: 2px;
				}
				.undertint {
					color: rgb(102, 102, 102, 0.4);
				}
			}

			.row:nth-child(2n) {
				background: #0068b7;
				background-color: rgba(0, 0, 0, 0.15);
				background: url("../../assets/homeImg/copy21.png") no-repeat center;
			}

			.scroll-container {
				overflow: hidden;
				white-space: nowrap;
			}

			.scroll-text {
				display: inline-block;
				padding-left: 100%;
				animation: scroll-left 7s linear infinite;
			}

			@keyframes scroll-left {
				from {
					transform: translateX(0);
				}
				to {
					transform: translateX(-100%);
				}
			}
		}
		.bottomRight {
			background: url("../../assets/homeImg/jjng.png") no-repeat center;
			background-size: 100% 100%;
			width: 38.69rem;
			height: 100%;
			position: relative;
			.select-time {
				text-align: right;
				margin-top: 6.25rem;
				// position: absolute;
				// left: 54%;
				// top: 13%;
			}
			.rightTitLe {
				position: absolute;
				left: 40%;
				top: 1.5%;
				font-family: Microsoft YaHei;
				font-weight: 400;
				font-size: 1.625rem;
				color: #ffffff;
				letter-spacing: 4px;
			}

			.module-content {
				display: flex;
				justify-content: space-evenly;
				flex-wrap: nowrap;
				overflow: hidden;
				flex-direction: column;
				position: absolute;
				left: 6.625rem;
				top: 25%;
				.statistical-itemsbottom {
					margin-top: 7.6875rem;
				}
				.statistical-itemstop,
				.statistical-itemsbottom {
					display: flex;
					align-items: center;
					.imagesitems {
						width: 9.5625rem;
						height: 8.5rem;
					}
					.name {
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 1.5rem;
						color: #ffffff;
						margin-left: 4.0625rem;
					}
					.num {
						font-family: KaiTi;
						font-weight: 400;
						font-size: 2.25rem;
						color: #00fcff;
						margin-left: 1.9375rem;
					}
				}
			}
		}
	}
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
}

// .imagesitems {
//   animation: pulse 2s infinite;
// }

</style>
